<template>
  <!-- 统计数据-组件(自定义) -->
  <div class="u_foot">
    <div class="u_foot_d1">显示第 {{total?pageData.offset+1:0}} 到第 {{pageData.offset | pageCurNext_f(pageData.limit,total)}} 条记录，总共 {{total}} 条记录</div>
    <el-pagination
      layout="sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :page-sizes="pageSizes"
      :page-size="pageData.limit" :total="total" :current-page.sync="curPageNum" class="u_foot_d2"
      :hide-on-single-page="isHide" ref='pageDom'>
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'commPage',
  props: {
    pageData: Object, // 对象 limit offset
    total: Number, // 总数
    curPage: { // 当前页
      type: Number,
      default: 0
    },
    isDef: { // 默认处理 或者 自定义
      type: Boolean,
      default: true
    },
    isHide: { // 1页时隐藏 是否启动
      type: Boolean,
      default: false
    },
    pageSizes: { // 可选当页-数
      type: Array,
      default: () => {
        return [10, 20, 30, 50]
      }
    }
  },
  data() {
    return {
      curPageNum: this.curPage
    }
  },
  created() {
  },
  methods: {
    // 分页数量-设置
    handleSizeChange(val) {
      if (this.isDef) { // 启动默认
        this.pageData.limit = val
        this.$emit('pageChange', 'limit')
      } else { // 自定义
        this.$emit('pageChange', {type: 'limit', value: val})
      }
    },
    // 页码-跳转
    handleCurrentChange(val) {
      if (this.isDef) { // 启动默认
        this.pageData.offset = (val - 1) * this.pageData.limit
        this.$emit('pageChange', 'curr')
      } else { // 自定义
        this.$emit('pageChange', {type: 'curr', value: val})
      }
    }
  },
  filters: {
    // 分页当前页-尾条数
    pageCurNext_f(offset, limit, total) {
      var curNex = (offset + limit)
      return curNex > total ? total : curNex
    }
  },
  watch: {
    curPageNum(newV, oldV) {
      this.$emit('update:curPage', newV) // 改变-父组件值
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
